import React, { PureComponent } from 'react';
import { List, Switch ,Slider, WingBlank,} from 'antd-mobile';
import run from '../../assets/images/device/run.png'
import "./index.less";
export default class temperature extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            checked: false,//自动开关
            checked1: false,//手动开关
            run,
            value:4,
        }
    }

    componentDidMount() {

    }

    componentDidUpdate() {
    }
    stwich(id) {
        if (id === 1) {
            this.setState({
                checked: !this.state.checked,
            });
        } else {
            this.setState({
                checked1: !this.state.checked1,
            });
        }

    }
    onchange(e){
         this.setState({value:e});
    }
    render() {
        const {  checked1,run,value } = this.state
        return (
            <div className="temperature">
                <div className="temperatureTop">
                    <div className='left'>温度控制</div>
                    <div className='right'>保存</div>
                </div>
                <div className='content1'>

                </div>
                <div className='content2'>
                    <List.Item
                        className='stwich'
                        extra={<Switch
                            checked={this.state.checked}
                            onChange={this.stwich.bind(this, 1)}
                        />}
                    > 自动化设置 </List.Item>
                </div>
                <div className='content2'>
                    <List.Item
                        className='stwich'
                        extra={<Switch
                            checked={this.state.checked1}
                            onChange={this.stwich.bind(this, 2)}
                        />}
                    > 手动化设置 </List.Item>
                    {
                        checked1 && (<div>
                            <h2 className='wdtitle1'>{value} &#176;C</h2>
                            <h3 className='wdtitle2'>目标<span>制冷</span></h3>
                            <div className='slider'>
                                <WingBlank size="lg">
                                    <p className="sub-title1">4 &#176;C</p>
                                    <p className="sub-title2">40 &#176;C</p>
                                    <Slider
                                        style={{ marginLeft: 30, marginRight: 30 ,}}
                                        defaultValue={4}
                                        step={1}
                                        min={4}
                                        max={40}
                                        onChange={e => this.onchange(e)}
                                        handleStyle={{
                                            height:'28px',
                                            width:'40px',
                                            borderRadius:'10px',
                                            marginTop:' -4px',
                                            marginRight:'40px',
                                            backgroundImage:`url(${run})`,
                                            backgroundSize:'40px 28px',
                                            border:'none',
                                            
                                        }}
                                        railStyle={{
                                           height:'20px',
                                           borderRadius:'10px',
                                          }}
                                          trackStyle={{
                                            height: '20px', 
                                            borderRadius:'10px',   
                                          }}
                                    />
                                </WingBlank>
                            </div>
                        </div>)


                    }
                </div>
            </div>
        )
    }

    checkTab = (record) => {

    };
}
